<template>
    <div>
        <el-dialog title="设备事件记录" v-model="state.showInfoDialog" width="90%">

            <div class="flex mb-3">
                <div class=" left  mr-3  " style="width: 300px;">
                    <div class="title ">
                        设备
                    </div>
                    <div class="content rounded-b-[10px] text-[12px]">
                        <div>
                            {{ state.info['产品品牌'] }}
                        </div>
                        <div class="break-all">
                            {{ state.info['产品型号'] }}
                        </div>
                        <div class="flex justify-center items-baseline">
                            <img src="https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/04/08/ChMkK2YFNASIaomUAAVlHh-DqqYAAcTPgOUKDUABWU2039.png"
                                alt="" class="w-[160px] mx-auto">
                        </div>
                        <div class="flex items-baseline pb-[4px]">
                            <div class="w-[80px]">序列号</div>
                            <div class="flex-1 text-right break-all">{{ state.info['产品IMEI'] }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">IMEI</div>
                            <div class="flex-1 text-right break-all">{{ state.info['产品IMEI'] }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">MEID</div>
                            <div class="flex-1 text-right break-all">{{ state.info['产品IMEI'] }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">Apple 有限保修</div>
                            <div class="flex-1 text-right break-all"></div>
                        </div>

                    </div>

                </div>

                <div class="right flex-1 mr-3">

                    <div class="title">
                        诊断记录
                    </div>
                    <div class="content  rounded-b-[10px] text-[12px]">
                        <div class="font-extrabold pb-[20px]">诊断地址: <a href="">https:/dlagnostics.apple.com</a> </div>
                        <div class="items-baseline">
                            <div class="zhenduan_title">HDI强制重新启动</div>
                            <div class="flex  items-baseline pb-[4px] ">

                                <div class="w-[80px]">最大值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">最小值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">客户报告</div>
                            </div>
                            <div class="flex   pb-[4px] ">
                                <div class="w-[180px]">事件ID:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">{{ state.info['e1'] }}</div>
                                <div class="w-[80px]">诊断详情</div>
                            </div>
                        </div>


                        <div class="items-baseline">
                            <div class="zhenduan_title">HDI无法开机</div>
                            <div class="flex  items-baseline pb-[4px] ">

                                <div class="w-[80px]">最大值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">最小值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">客户报告</div>
                            </div>
                            <div class="flex   pb-[4px] ">
                                <div class="w-[180px]">事件ID:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">{{ state.info['e8'] }}</div>
                                <div class="w-[80px]">诊断详情</div>
                            </div>
                        </div>


                        <div class="items-baseline">
                            <div class="zhenduan_title">电池用量</div>
                            <div class="flex  items-baseline pb-[4px] ">

                                <div class="w-[80px]">最大值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">最小值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">客户报告</div>
                            </div>
                            <div class="flex   pb-[4px] ">
                                <div class="w-[180px]">事件ID:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">{{ state.info['e3'] }}</div>
                                <div class="w-[80px]">诊断详情</div>
                            </div>
                        </div>

                        <div class="items-baseline">
                            <div class="zhenduan_title">移动设备资源检查器</div>
                            <div class="flex  items-baseline pb-[4px] ">

                                <div class="w-[80px]">最大值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">最小值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">客户报告</div>
                            </div>
                            <div class="flex   pb-[4px] ">
                                <div class="w-[180px]">事件ID:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">{{ state.info['e10'] }}</div>
                                <div class="w-[80px]">诊断详情</div>
                            </div>
                        </div>


                        <div class="items-baseline">
                            <div class="zhenduan_title">充电功能</div>
                            <div class="flex  items-baseline pb-[4px] ">

                                <div class="w-[80px]">最大值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">最小值:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">2</div>
                                <div class="w-[80px]">客户报告</div>
                            </div>
                            <div class="flex   pb-[4px] ">
                                <div class="w-[180px]">事件ID:</div>
                                <div class="flex-1 text-left break-all pl-[10px]">{{ state.info['e2'] }}</div>
                                <div class="w-[80px]">诊断详情</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right flex-1 mr-3">

                    <div class="title">
                        维修记录
                    </div>
                    <div class="content   rounded-b-[10px] text-[12px]">
                        <div class="py-[15px] border-solid border-0 border-b border-[#eee]">
                            <div class="mb-5">
                                <div class="flex items-center  ">
                                    <div class="w-[100px] font-semibold">
                                        <div>G{{ state.info['weiixu_0'] }}</div>
                                        <div>维修已标记为完成</div>
                                    </div>
                                    <div class="flex-1 text-right">{{ state.info['g3_time'] }}</div>
                                </div>

                            </div>
                            <div class="w-[600px]">



                                <div class="flex items-center  ">
                                    <div class="w-[300px] font-semibold">客户</div>
                                    <div class="flex-1 ">NCXBDT</div>
                                </div>
                                <div class="flex items-center  ">
                                    <div class="w-[300px] font-semibold">维修</div>
                                    <div class="flex-1 ">G{{ state.info['weiixu_0'] }}</div>
                                </div>
                                <div class="flex items-center  ">
                                    <div class="w-[300px] font-semibold">维修类型</div>
                                    <div class="flex-1 ">Carryin</div>
                                </div>
                                <div class="flex items-center  ">
                                    <div class="w-[300px] font-semibold">部件</div>
                                    <div class="flex-1 ">CH{{ state.info['weiixu_1'] }}</div>
                                </div>

                                <div class="flex items-center  ">
                                    <div class="w-[300px] font-semibold">部件</div>
                                    <div class="flex-1 ">Display, iPhoner {{ state.info['产品型号'] }}</div>
                                </div>
                                <div class="flex items-center  ">
                                    <div class="w-[300px] font-semibold">一级网点</div>
                                    <div class="flex-1 "></div>
                                </div>
                                <div class="flex items-center  ">
                                    <div class="w-[300px] font-semibold">二级网点</div>
                                    <div class="flex-1 "></div>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>
            <div class="flex">

            </div>




            <template #footer>
                <span>
                    <el-button @click=" state.showInfoDialog = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script lang="ts" setup name="info">

import { apiWorktaskzhenduan } from '@/api/tb_worktask'

const state = reactive({
    showInfoDialog: false,
    info: {
        '产品IMEI': '352425465309774'
    }

})

const open = (row: any) => {

    state.showInfoDialog = true
    apiWorktaskzhenduan({ id: row.id }).then(res => {
        state.info = res

    })
}

defineExpose({
    open: open
})



</script>

<style scoped>
.items-baseline {
    margin-bottom: 10px;
}

.zhenduan_title {
    font-weight: bold;
    margin-bottom: 10px;
}

.title {
    background: #ccc;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}

.content {
    height: 600px;
    border: 1px solid #ccc;
    padding: 15px;
}
</style>
